<template>
	<div>
	<!-- 面包屑导航 -->
	<el-breadcrumb separator-class="el-icon-arrow-right">
	  <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
	  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 用户列表区域 -->
	<el-card class="box-card">
		<el-button type="primary" @click="addDialog">添加分类</el-button>
		<el-dialog
		  title="提示"
		  :visible.sync="addDialogVisible"
		  width="30%"
		  >
		  <el-form>
			<el-form-item>
			    <el-input v-model="addCateForm.cat_name" placeholder="请输入分类名称"></el-input>
			</el-form-item>
            <el-form-item>
				请选择分类： 
				<el-cascader
				  v-model="cateinfo"
				   :options="parentCatelist"
				   :label="parentCatelist.cat_name"
				   :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"
				   @change="handleChange"
				   change-on-select="true"
				   clearable
				   ></el-cascader>
				
			</el-form-item>
		  </el-form>

		  <span slot="footer" class="dialog-footer"> 
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCateSubmit">确 定</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="修改名称"
		  :visible.sync="editDialogVisible"
		  width="30%"
		  >
		  <el-form>
			<el-form-item>
			    <el-input v-model="editCate_name" placeholder="请输入分类名称"></el-input>
			</el-form-item>
			</el-form-item>
		  </el-form>
		
		  <span slot="footer" class="dialog-footer"> 
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editCate">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 树形表格 -->
		<tree-table class="tree-table" :data="catelist" :columns="columns" :selection-type="false" :show-row-hover="false" :expand-type="false" show-index index-text="#" border>
			<template slot="isok" slot-scope="scope">
				<i :class="[scope.row.cat_deleted === false ? 'el-icon-success':'el-icon-error']"></i>
			</template>
			<template slot="order" slot-scope="scope">
				<el-tag :type="cateLevelStyle[scope.row.cat_level]">{{cateLevel[scope.row.cat_level]}}</el-tag>
			</template>
			<template slot="opt" slot-scope="scope">
				<el-button @click="editCateVisible(scope.row)" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
				<el-button @click="delCate(scope.row.cat_id)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
			</template>
		</tree-table>
		
		<!-- 分页 -->
		 <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryinfo.pagenum"
		      :page-sizes="[1, 5, 10, 20]"
		      :page-size="queryinfo.pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
	</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{			
				catelist:[],
				parentCatelist:[],
				editCate_name:'',
				editCate_id:'',
				cateinfo: [],
				columns: [{
					label:'分类名称',
					prop:'cat_name'
				},
				{
					label:'有效性',
					type:'template',
					template:'isok'
				},
				{
					label:'排序',
					type:'template',
					template:'order'
				},
				{
					label:'操作',
					type:'template',
					template:'opt'
				}
				],
				queryinfo:{
					type: 3,
					pagenum : 1,
					pagesize :5
				},
				total: 0,
				cateLevel:['一级','二级','三级'],
				cateLevelStyle:['primary','success','warning'],
				addDialogVisible: false,
				editDialogVisible:false,
				addCateForm:{
					cat_name:'',
					cat_pid:0,
					cat_level:0
				}
			}
		},
		created() {
			this.getCateList()
		
		},
		methods:{
			async getCateList(){
				const { data:res } = await this.$http.get('categories',{ params: this.queryinfo })
				if( res.meta.status !== 200 )
				return this.$message.error('获取失败')
				this.catelist = res.data.result
				this.total = res.data.total
				console.log(res)
			},
			handleSizeChange(newSize){
				this.queryinfo.pagesize = newSize
				this.getCateList()
			},
			handleCurrentChange(newPage){
				this.queryinfo.pagenum = newPage
				this.getCateList()
			},
			async addDialog(){
				 const { data:res } = await this.$http.get('categories',{ params: {'type': 2} })
				 
				//console.log(res)
				 if( res.meta.status !==200 )
				 return this.$message.error('获取失败')
				 
				 this.parentCatelist = res.data
				 console.log(this.parentCatelist)
				this.addDialogVisible = true
				 console.log(this.catelist)
			},
			handleChange(value){
				console.log(value.length)
				console.log(this.cateinfo)
				this.addCateForm.cat_level = value.length
				this.addCateForm.cat_pid = value[value.length-1]
			},
			async addCateSubmit(){
				const { data:res } = await this.$http.post('categories',this.addCateForm)
				console.log(res)
				if( res.meta.status !== 201 )
				return this.$message.error(res.meta.msg)
				
				this.$message.success(res.meta.msg)
				this.addCateForm.cat_level = 0
				this.addCateForm.cat_pid = 0
				this.addCateForm.cat_name = ''
				this.getCateList()
				this.addDialogVisible = false
			   
			},
			editCateVisible(cateRow){
				this.editCate_name = cateRow.cat_name
				this.editCate_id = cateRow.cat_id
				this.editDialogVisible = true
			},
			async editCate(){
				console.log(this.editCate_id)
				const { data:res } = await this.$http.put('categories/'+this.editCate_id,{ 
					cat_name:this.editCate_name
				 })
				console.log(res)
				if( res.meta.status !== 200 )
				return this.$message.error(res.meta.msg)
				
				this.$message.success(res.meta.msg)
				this.editCate_name = ''
				this.editCate_id = ''
				this.getCateList()
				this.editDialogVisible = false
				
			},
			async delCate(cateId){
							        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
							          confirmButtonText: '确定',
							          cancelButtonText: '取消',
							          type: 'warning'
							        }).then(async() => {
									 const {data:res} = await this.$http.delete('categories/'+cateId)
									 if( res.meta.status !== 200 )
									 return res.meta.msg 
							          this.$message({
							            type: 'success',
							            message: '删除成功!'
							          });
									  this.getCateList()
							        }).catch(() => {
							          this.$message({
							            type: 'info',
							            message: '已取消删除'
							          });          
							        });
							      
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.tree-table{
		margin-top: 20px;
	}
	.el-icon-success{
		color: limegreen;
	}
	.el-icon-error{
		color: red;
	}
	.tree-table .el-button{
		margin-left: 25px;
	}
</style>
